<template>
  <div class="list-all"  @click="getMisic(item.id)">
    <div class="list-item" >
      <span class="song-index">
        {{index+1}}
      </span>
      <div class="item-title">
        <div class="name">
          <p>{{item.name}}</p>
          <p>{{item.album[0][0].name}}</p>
        </div>
        <div class="icon">
          <i class="icon-list-circle" @click.stop="icon()"></i>
        </div>
      </div>
    </div>

  </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios';

  export default {
    name: "",
    props: {
      item:{},
      index:''
    },
    data(){
      return {
        info:{  //audio 信息
          id: 0,  //歌曲Id
          name: '', //歌曲名称
          singer: '', //歌手
          url: '',  //歌曲url
          img_url: '', //图片url
          type: '', // 歌曲分类
          lyric: '' //歌词
        },
        lyric: '111' //歌词
      }
    },
    computed:{

    },
    methods:{
      icon(){
        console.log(111);
      },
      getMisic(id){
        this.getLyric(id);
        //console.log(lyric);
        //获取音乐 URL
        axios.get(this.base.conf.http.url+"/music/url?id="+id
        ).then((response) => {
          if(response.data.code === 200){
            // this.info.id = response.data.data[0].id;
            // this.info.url = response.data.data[0].url;
            var the = this;
            setTimeout(function () {
              console.log('开始play()');
              the.$store.commit('setPlaying')
            },500)
            this.info = {
              url: response.data.data[0].url,
              id : response.data.data[0].id,
              singer:this.item.album[0][0].name,
              name:this.item.name,
              img_url:this.item.album.blurPicUrl,
              type:'mp3',

            }
          }
        }).catch((err)=>function () {
          console.log(err);
        })
      },
      // 获取歌词
      getLyric(id){
        axios.get(this.base.conf.http.url+"/lyric?id="+id
        ).then((response) => {
         if(response.data.code === 200){
             this.$store.state.audio.info.lyric = response.data.lrc.lyric;
         }
        }).catch((err)=>function () {
          console.log(err);
        })
      }
    },
    watch:{
      info:function () {
        this.$store.state.audio.info = this.info;
      }
    },
    created() {
      // console.log(this.item);
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../style/font-icon/style.css";
  @import '../../style/mixin.scss';
  .list-all{
    background-color:rgb(243, 244, 246);
  }

  .list-item{
    @include fj(space-between,center);
    @include wh(100%,104px);
    z-index: 9;
  }
  .list-item .song-index{
    font-size: 30px;
    color: rgb(145,146,147);
    padding-left: 10px;
    padding-right: 10px;
    @include wh(102px,102px);
    @include fj(center,center);
  }
  .item-title{
    @include fj(space-between,center);
    @include wh(100%,102px);
    border-bottom: 2px solid  rgb(231, 233, 233);
  }

  .item-title p:first-child{
    @include wh(100%,36px);
    overflow: hidden;
    font-size: 28px;
    color: rgb(48,49,49);
    font-family: Tahoma;
    font-weight: 500;
    padding-top: 6px;
    margin-bottom: 10px;
  }
  .item-title .name p {
    @include fj(flex-start,center);
  }
  .item-title .name span{
    font-size: 22px;
    color: rgb(145,146,147);
  }


  .item-title p:nth-child(2){
    font-size: 20px;
    font-weight: 400;
    color: rgb(150, 150, 150);
  }
  .icon{
    @include wh(88px,inherit);
    @include fj(center,center)
  }
  .icon-list-circle{
    padding: 20px 28px 20px 10px;
    font-size: 30px;
    color:rgb(170, 171, 172);
    z-index: 10;
  }
</style>
